<%--
  Created by IntelliJ IDEA.
  User: 步步为莹
  Date: 2019/9/15
  Time: 9:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/login.css">
</head>
<body>
<div>
    <div id="title">
        <h1 align="center">Beyond车辆管理平台</h1>
        <h4 align="center">beyond vehicle management system</h4>
    </div>
    <div class="container" >
        <!--模态框展示注册界面-->
        <div class="modal-dialog"style="width: 400px;margin-left: 33%">
            <div class="modal-content">
                <div class="modal-body" >
                    <form class="form-group">
                        <h2 align="center">用户登录</h2>
                        <div class="form-group">
                            <lable style="font-weight: bold">用户名:<input class="form-control" type="text"
                                                                        placeholder="请输入用户名"
                                                                        id="username">
                                <span id="DivUser"></span></lable>
                        </div>
                        <div class="form-group">
                            <label >密码:
                                <input class="form-control" type="password" placeholder="请输入密码"
                                       id="pwd">
                                <span id="DivPwd"></span><br/>
                            </label>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-primary" type="button" style="margin-left:
                            20px" onclick="chek()">提交</button>&nbsp;&nbsp;&nbsp;
                            <button class="btn btn-danger"  type="button">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript"
        src="<%=request.getContextPath()%>/static/js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    var $userName=$("#username");
    var $pwd=$("#pwd");
    //绑定失去焦点事件
    $userName.blur(checkUser);
    $pwd.blur(chkpassword);
   function  checkUser() {
       var flag=true;
       var username = $userName.val().trim();
       if (username === "") {
           alert("用户名不能为空！");
           flag=false;

       }
       return flag;
   }

    /**
     * 查看密码
     */
     function chkpassword() {
         var pwd=$("#pwd").val().trim();
         var flag=true;
         if (pwd===""){
             alert("密码不能为空！");
             flag= false;
         }
         return  flag;
     }
    
   
   function chek() {
       var userName=$userName.val().trim();
       var pwd=$pwd.val().trim();
        if (checkUser()&&chkpassword()){
            $.get("<%=request.getContextPath()%>/userServlet","username="+userName+"&pwd="+pwd+"&opr=checkUser",callback);
        }
       
   }
    //回调函数
    function callback(data) {
        var username=$userName.val().trim();
        if (data!="true"){
            alert("用户名或密码错误！");
        }else {
            window.location.href="<%=request.getContextPath()%>/DictionaryServlet?opr=DictionaryList&username="+username;
        }

    }
</script>
</body>
</html>
